<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账户设置</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css
    ">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/userSeting.css">
</head>

<body>
    <!-- 导航菜单 -->
    <nav>
        <div class="main">
            <img src="../img/index/logo.png" alt="" class="logo">
            <ul class="">
                <li class="check"><a href="../index.html">首页</a></li>
                <li><a href="./online.html">同步课程</a></li>
                <li><a href="javascript:;">在线练习</a></li>
                <li><a href="../index.html#jing">精品课程</a></li>
            </ul>
            <div class="search">
                <div class="left">课程<i class="iconfont icon-down"></i>
                </div>
                <input type="text" placeholder="搜索感兴趣的内容" id="keyWord">
                <img src="../img/public/search.png" alt="" id="searchByKeyword">
            </div>
            <div class="user">
                <!-- <img class="userImg" src="../img/login/user.png" alt=""> -->
                <img class="userImg" src="../img/login/user.png" alt="" id="userImg">
                <div class="userlist">
                    <ul>
                        <li>我是用户名</li>
                        <li id="coursesCenter">课程中心</li>
                        <li><a href="./product.html">订单中心</a></li>
                        <li>资金管理</li>
                        <li><a href="./userSeting.html">个人中心</a></li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <!-- 主体内容 -->
    <main>
        <div class="leftNav" id="leftNav">
            <ul>
                <li class="list">
                    <p class="class">
                        <span>课程中心</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select"><a href="./course.html">我的课程</a></li>
                        <li class="select">我的练习</li>
                    </ol>
                </li>
                <li class="list">
                    <p class="order">
                        <span>订单中心</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select">我的订单</li>
                    </ol>
                </li>
                <li class="list">
                    <p class="money">
                        <span>资金管理</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select">我的钱包</li>
                        <li class="select">优惠券</li>
                    </ol>
                </li>
                <li class="list">
                    <p class="center">
                        <span>个人中心</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select active">账户设置</li>
                        <li class="select">我的消息</li>
                        <li class="select">我的评价</li>
                    </ol>
                </li>
            </ul>
        </div>
        <div class="rightUser">
            <div class="title_top">
                <span>账户设置</span>
                <span>&gt;</span>
                <span>个人中心</span>
            </div>
            <div class="title_center">
                <span>学员档案</span>
            </div>
            <div class="content_show">
                <div class="my_icon">
                    <span>头像</span>
                    <a href="javascript:;">
                        <img id="avatar" src="../img/login/user.png" class="myIcon" />
                        <!-- <img id="avatar" src="../img/login/user.png" class="myIcon" /> -->
                        <div class="change">
                            更换头像
                            <input type="file" id="uploadFile" class="btn_file" />
                        </div>
                    </a>
                </div>
                <div class="my_name">
                    <div class="my_name_left">
                        <span>真实姓名</span>
                        <input type="text" id="username" placeholder="方便老师联系你，只能修改一次哦～">
                    </div>
                </div>
                <div class="my_sex">
                    <div class="my_name_left" id="sex">
                        <span>学员性别</span>

                    </div>
                    <div class="my_name_right">
                        <span>生日</span>
                        <input type="date" name="user_name" id="birthDady">
                    </div>
                </div>
                <div class="my_phone">
                    <div class="my_name_left">
                        <span>城市</span>
                        <!-- <span id="city"></span> -->
                        <input type="text" id="city">
                    </div>
                </div>
                <div class="my_learn">

                    <div class="my_name_right" id="save">
                        保存
                    </div>
                </div>
            </div>
        </div>
        <div style="clear: both;"></div>
    </main>
    <!-- 底部栏 -->
    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照 | 教师资格证公示

                </p>
                <p>
                    京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备 01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 | 食品经营许可证：JY13101140088888
                </p>
                <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>

    <!-- 固定导航 -->
    <div class="fix">
        <div class="lesson">
            <img src="../img/index/mylesson.png" alt="">
        </div>
        <div class="test">
            <img src="../img/index/mytest.png" alt="">
        </div>
        <div class="top">
            <img src="../img/index/gotop.png" alt="">
        </div>
    </div>

    <!-- 
        document.createElement()
        new Image()
        <form></form>
     -->

    <script src="../js/userSeting.js"></script>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js
"></script>
<script src="../utils/http.js"></script>
<!-- <input type="file" id="fff" name="myfile" /> -->
<script>
    // 退出登录的方法
    $('.out').on('click', function() {
        localStorage.removeItem('mid');
        localStorage.removeItem('token');
        location.reload();
        location.href = './loginAndRegister/login.html';
    });
    //跳转到课程中心
    $('#coursesCenter').on('click', function() {
        location.href = 'course.html';
    });

    //跳转到搜索页
    $('#searchByKeyword').on('click', function() {
        // alert('ok')
        let keyword = $('#keyWord').val()
        if (keyword == '') {
            alert('请输入关键字进行搜索')
            return
        }
        location.href = './search_list.html?keyword=' + keyword
    })

    // function timestampToTime(timestamp) {
    //     //时间戳为10位需*1000，时间戳为13位的话不需乘1000
    //     var date = new Date(timestamp * 1000);
    //     Y = date.getFullYear() + '-';
    //     M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    //     D = date.getDate() + ' ';
    //     h = date.getHours() + ':';
    //     m = date.getMinutes() + ':';
    //     s = date.getSeconds();
    //     // return Y + M + D + h + m + s;

    //     console.log(M);
    //     return Y + M + D;
    // }
    // console.log(timestampToTime(1621922140914)); //2021-05-25 13:55:40


    let mid = localStorage.getItem('mid')
        //选择头像，进行兼听文件元素是否选择
    $('#uploadFile').on('change', function() {
        //1. 必须选择jpg后缀的文件，
        // console.log( this.files )
        let f = this.files[0]
        if (!f.name.endsWith('.jpg')) {
            alert('请选择一个jpg文件')
            return
        }
        var form = new FormData();

        form.append("mid", mid); // 可以增加表单数据
        form.append("f", f); //添加文件信息
        //之前使用form标签传递文件 enctype='mutilpart/form-data'
        $.ajax({
            url: `${API_URL}/api/uploadhead`,
            method: 'post',
            data: form,
            cache: false, //不设置缓存,可设置可不设置
            processData: false, // 向后端传递的数据不进行编码
            contentType: false, //配置processData结合使用的。
            headers: {
                //ajax中的headers就是传递请求头参数
                authorization: localStorage.getItem('token')
            },
            success(res) {
                // console.log(res, '123')
                // console.log(res.result)
                $('#avatar').attr('src', res.result)
                $('#userImg').attr('src', res.result);
            }
        })
    })

    //获取用户信息
    async function getUserInfo() {
        let {
            err,
            result
        } = await myAjax({
                url: '/api/user',
                data: {
                    mid
                }
            })
            // console.log(result);

        let userInfo = result.result
            // console.log( userInfo.realname )
            //1. 为真实姓名赋值
        $('#username').val(userInfo.realname)
            //2. 头像赋值
        $('#avatar').attr('src', userInfo.head_photo_url);
        $('#userImg').attr('src', userInfo.head_photo_url);

        //3. 性别处理
        let sexStr = `
            <label for=""><input ${userInfo.sex == 1 ? 'checked' : ''} value="1" type="radio" name="sex" ><span>男</span></label>
            <label for=""><input ${userInfo.sex == 2 ? 'checked' : ''} value="2"  type="radio" name="sex" ><span>女</span></label>
            <label for=""><input ${userInfo.sex == 3 ? 'checked' : ''} value="3" type="radio" name="sex" ><span>保密</span></label>
        `
        $('#sex').append(sexStr);
        // console.log($('#sex').val());

        function timestampToTime(timestamp) {
            //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var date = new Date(timestamp);
            Y = date.getFullYear() + '-';
            M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
            // D = date.getDate() + '';
            h = date.getHours() + ':';
            m = date.getMinutes() + ':';
            s = date.getSeconds();
            console.log(Y + M + D);
            // return Y + M + D + h + m + s;
            return Y + M + D;
        }
        // console.log(timestampToTime(1621922140914 - 0)); //2021-05-25 13:55:40
        // console.log(timestampToTime(1621922140914)); //2021-05-25 
        // console.log(timestampToTime(parseInt(userInfo.birthdate)));
        $('#birthDady').val(timestampToTime(parseInt(userInfo.birthdate)));

        $('#city').val(userInfo.city);
    }
    getUserInfo();


    //更新用户信息
    //$('#sex input:checked').val() 获取单选按钮被选中的值


    //点击保存按钮后调用更新用户信息的方法
    $('#save').on('click', function() {

        realname = $('#username').val();
        sex = $('#sex input:checked').val();
        birthdate = $('#birthDady').val();
        birthdate = new Date(birthdate).getTime();
        // city = $('#city').html();
        city = $('#city').val();
        // console.log(realname);
        // console.log(sex);
        // console.log(birthdate);
        // console.log(city);
        // updateUserInfo();
        $.ajax({
            url: `${API_URL}/api/user`,
            method: 'put',
            data: {
                realname,
                sex,
                birthdate,
                city,
                mid
            },
            headers: {
                //ajax中的headers就是传递请求头参数
                authorization: localStorage.getItem('token')
            },
            success(res) {
                console.log(res);
                location.reload();
                alert('修改成功！！！');
            }
        });
        // let {
        //     err,
        //     result
        // } = myAjax({
        //     url: '/api/user',
        //     method: 'put',
        //     data: {
        //         realname,
        //         sex,
        //         birthdate,
        //         city,
        //         mid
        //     },
        //     success(res) {
        //         // console.log(res, '123')
        //         // console.log(res.result)
        //         $('#avatar').attr('src', res.result)
        //         $('#userImg').attr('src', res.result);
        //     }
        // });
        // console.log(result);



    });

    // async function updateUserInfo() {
    //     let {
    //         err,
    //         result
    //     } = await myAjax({
    //         url: '/api/user',
    //         method: 'put',
    //         data: {
    //             realname,
    //             sex,
    //             birthdate,
    //             city,
    //             mid
    //         }
    //     });
    //     console.log(result);

    // }
</script>
<script src="../js/ujiuye.js"></script>

</html>
<style>
    #avatar {
        border-radius: 50%;
    }
</style>